import React from 'react';

export class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };
  }

  handleClick = () => {
    // // count: 1,
    // // 第一次，我想在之后的 setState 方法中拿到修改后的值
    // this.setState({
    //   count: 2,
    // });

    // // 第二次
    // this.setState((state) => {
    //   // 此时拿到的值当前修改可以拿到的最新值：2
    //   console.log('第二次, setState 回调函数的写法', state.count);
    //   return {
    //     // 在2的基础上加1
    //     count: state.count + 1,
    //   };
    // });

    // // 第三次
    // this.setState((state) => {
    //   // 此时拿到的值当前修改可以拿到的最新值：3
    //   console.log(state.count);
    //   return {
    //     // 在3的基础上加1
    //     // 如果没有后续的修改，则 4 更新到页面上
    //     count: state.count + 1,
    //   };
    // });

    // // setState 始终表现是异步的，所以这里还是 初始化时的 count
    // console.log(this.state.count); // 1

    // this.setState(
    //   (state) => {
    //     // 当前修改最新的state
    //     return {
    //       count: state.count + 1,
    //     };
    //   },
    //   // 不推荐的写法
    //   () => {
    //     console.log('这个回调函数会在render之后执行1');
    //   }
    // );

    setTimeout(() => {
      this.setState({
        count: this.state.count + 1,
      });
      this.setState({
        count: this.state.count + 1,
      });
    }, 0);
  };

  // componentDidUpdate() {
  //   console.log('这个回调函数会在render之后执行2');
  // }

  render() {
    console.log('render 了，渲染了');
    return (
      <div>
        <h1>count: {this.state.count}</h1>
        <button onClick={this.handleClick}>setState是异步的</button>
      </div>
    );
  }
}
